<template>
	<view class="content">
		<view class="title">
			子组件A
		</view>
		<view class="box">
			父组件传进来的值：
			<text class="intent-text-box">{{ intent }}</text>
		</view>
		<view class="box">
			<button @click="sendData()" size="mini" class="btn">传值给CompB组件</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ComA",
		props: {
			intent: {
				type: String,
				default: ''
			}
		},
		data() {
			return {};
		},
		methods: {
			sendData() {
				this.$emit('sendToCompB', this.intent);
			}
		}
	}
</script>

<style>
	.content {
		background: linear-gradient(135deg, #ebf8ff 0%, #e6fffa 100%);
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 30rpx 0;
		border: 2rpx solid #bee3f8;
		box-shadow: 0 8rpx 25rpx rgba(49, 130, 206, 0.15);
	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		text-align: center;
		margin-bottom: 40rpx;
		padding-bottom: 25rpx;
		border-bottom: 2rpx solid #90cdf4;
		color: #2c5282;
		background: linear-gradient(135deg, #2c5282, #3182ce);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.box {
		margin: 30rpx 0;
		padding: 25rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #4a5568;
		border: 2rpx solid #e2e8f0;
		backdrop-filter: blur(5rpx);
	}

	.intent-text-box {
		color: #2b6cb0;
		font-weight: 600;
		margin-left: 15rpx;
		background: linear-gradient(135deg, #ebf8ff, #fed7d7);
		padding: 12rpx 24rpx;
		border-radius: 8rpx;
		border: 2rpx solid #bee3f8;
	}

	.btn {
		background: linear-gradient(135deg, #3182ce, #2b6cb0);
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 18rpx 35rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 15rpx rgba(49, 130, 206, 0.3);
		transition: all 0.3s ease;
	}

	.btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(49, 130, 206, 0.3);
	}
</style>